<template>
  <div class="x6-graph-wrap">
    有问题
    <div ref="container" class="x6-graph" />
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import { Graph, Node, Color } from '@antv/x6'
import '../index.less'
// import '@antv/x6-vue-shape'

export default defineComponent({
  name: "index",
  mounted() {
    const graph = new Graph({
      container: (this.$refs.container) as HTMLElement,
      width: 800,
      height: 600,
    })

    // const source = graph.addNode({
    //   shape: 'react-shape',
    //   x: 80,
    //   y: 80,
    //   width: 160,
    //   height: 60,
    //   data: {},
    //   xxx: {},
    //   component: (node) => {
    //     return "<div>{{node.attr('body/fill')}}</div>"
    //   },
    //
    //   // component: `<MyComponent text="Source" />`,
    // })
    //
    // const target = graph.addNode({
    //   shape: 'react-shape',
    //   x: 320,
    //   y: 320,
    //   width: 160,
    //   height: 60,
    //   component: (node) => {
    //     return "<div>{{node.attr('body/fill')}}</div>"
    //   },
    //   // component: (node) => {
    //   //   // return `<div>{node.attr('body/fill')}</div>`
    //   // },
    //   // component: () => <Test text="target" />,
    // })

    // graph.addEdge({
    //   source,
    //   target,
    // })

    const update = () => {
      // target.prop('attrs/body/fill', Color.randomHex())
      // setTimeout(update, 1000)
    }

    update()

    console.log(graph.toJSON())
  }
})
</script>

<style scoped>

</style>
